<template>
	<view>
		<nav-bar type="transparent" fontColor="#FFF" backState="2000">个人中心</nav-bar>

		<view class="user-section" @tap="onUserInfoClicked">
			<image class="user-section-bg" mode="scaleToFill" src="/static/myinfo-bg-1.png"></image>
			<view class="user-info-box">
				<view class="info-box">
					<view class="username"> {{displayUserInfo.name}} </view>
					<view class="other-info">{{displayUserInfo.groupRemark}}</view>
					<view class="other-info">{{displayUserInfo.groupName}}</view>
					<view class="other-info">{{displayUserInfo.mobile}}</view>
					<view class="other-info">{{displayUserInfo.email}}</view>
				</view>
				<image class="portrait" :src="missUrl"></image>
				<image class="arrow-right" :src="rightUrl"></image>
			</view>
		</view>

<!-- 		<view class="fun-section">
			<view class="fun-item" @click="onPFDClick">
				<image class="fun-img" :src="missUrl"></image>
				<view class="fun-title">PFD</view>
			</view>
			<view class="fun-item" @click="onCCTVClick">
				<image class="fun-img" :src="missUrl"></image>
				<view class="fun-title">监控</view>
			</view>
		</view> -->

		<!-- :class="index===items.length-1?'lastfood':''" -->
		<view v-if="true" class="list">
			<view class="sub-list" v-for="(sublist,sublistindex) in menulist" :key="sublistindex">

				<view class="menu-item" v-for="(sublistitem,index) in sublist" :key="index" @tap="onItemClick" :data-navurl="sublistitem.navigate"
				 hover-class="menu-item-hover">
					<image class="menu-item-icon" :src="sublistitem.icon"></image>
					<text class="menu-text">{{sublistitem.title}}</text>
					<image class="menu-arrow-right" src="/static/right-arrow-gray.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myInfoMenuData from '@/common/test_jsons/myinfo_menu.js';
	import jsSha256 from '@/common/sha256.js';

	import {
		mapState,
		mapMutations
	} from 'vuex';

	import {
		getDocCodeFareaData,
		getDocCodeAreaData
	} from '@/services/document.js';


	export default {
		computed: {
			...mapState(['userInfo']),
			displayUserInfo: function() {
				if (this.userInfo && this.userInfo.userEntity) {
					return {
						name: this.userInfo.userEntity.name,
						groupRemark: this.userInfo.userGroupEntity.groupRemark,
						groupName: this.userInfo.userGroupEntity.groupName,
						mobile: this.userInfo.userEntity.mobile,
						email: this.userInfo.userEntity.email,
					};
				} else {
					return {
						name: '',
						groupRemark: '',
						groupName: '',
						mobile: '',
						email: '',
					};
				}
			}
		},

		data() {
			return {
				imgUrl: "/static/" + 'myinfo_bg.png',
				missUrl: "/static/" + 'missing-face.png',
				rightUrl: "/static/" + 'iconfont-platform-entrance.png',
				menulist: myInfoMenuData,


				fareaData: [],
				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本'],
				],
				multiIndex: [0, 0],
			}
		},

		onLoad: function() {
			this.doGetDocCodeFareaData();
		},

		methods: {
			onPFDClick() {
				// debugger
				let AppID = "WvTErOT3qF7rHg5dKlEtD6";
				let AppKey = "xW56cgZCDu5HvT3sbCKzT7";
				let AppSecret = "b0jIFTAEEq8ekdi49zAL13";
				let MasterSecret = "jKYcXZlSIE79X9yvQemzA7";
				let timeStamp = (new Date()).getTime();
				var sign = jsSha256.sha256_digest(AppKey + timeStamp + MasterSecret);
				
				// appkey+timestamp+mastersecret

				uni.request({
					url: 'https://restapi.getui.com/v2/WvTErOT3qF7rHg5dKlEtD6/auth', //仅为示例，并非真实接口地址。
					method:"POST",
					data: {
						sign: sign,
						timestamp: timeStamp,
						appkey: AppKey,
					},
					header: {
						'content-type': 'application/json;charset=utf-8' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						this.text = 'request success';
					}
				});
			},

// daa4b033bcf746a5fdf4e318666b1ac00ca800743264849c47aca1ee5e54be4a
			// token   "3ca2bb820e023adec14c7182752e028c6ae26769ccdf5c1b801c78c00276b9a6"
			onCCTVClick() {
				// uni.navigateTo({
				// 	url: "/pages/cctv/cctv"
				// })
				
				uni.request({
					url: 'https://restapi.getui.com/v2/WvTErOT3qF7rHg5dKlEtD6/push/all', //仅为示例，并非真实接口地址。
					method:"POST",
					data: {
						request_id: "request_id-000222",
						group_name:"group_name",
						audience: "all",
						push_message: {
							notification: {
								title:"请填写通知标题",
								body:"请填写通知内容",
								click_type:"startapp",
							}
						},
					},
					header: {
						'content-type': 'application/json;charset=utf-8', //自定义请求头信息
						'token':"daa4b033bcf746a5fdf4e318666b1ac00ca800743264849c47aca1ee5e54be4a"
					},
					success: (res) => {
						console.log(res.data);
						this.text = 'request success';
					}
				});
			},

			onUserInfoClicked(e) {
				return;
				uni.navigateTo({
					url: "/pages/account/myinfoset"
				})
			},

			onItemClick(e) {
				var navurl = e.currentTarget.dataset.navurl;
				console.log("onItemClick e = " + navurl)
				uni.navigateTo({
					url: navurl
				})

			},

			getUserInfos() {
				uni.showLoading({
					title: "加载中"
				})
				queryUserInfo().then((res) => {
					if (res.code === '000000') {
						//todo 数据转化
						console.log(res)
					}
				});
			},

			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				// this.multiIndex[e.detail.column] = e.detail.value
				if (e.detail.column == 0 && this.multiIndex[e.detail.column] != e.detail.value) {
					this.multiArray[1] = [];
					this.multiIndex[e.detail.column] = e.detail.value
					this.doGetDocCodeAreaData(this.multiArray[0][this.multiIndex[0]]);
				}


				// if(this.multiIndex[e.detail.column] != e.detail.value ) {

				// }


				this.$forceUpdate()
			},

			doGetDocCodeFareaData() {
				uni.showLoading();
				var _self = this;
				getDocCodeFareaData({
					FareaCode: "",
					FareaName: ""
				}).then((res) => {
					if (res.code == '000000') {
						res.data.forEach(element => {
							element.showText = element.FareaCode + "-" + element.FareaName
						});
						_self.multiArray[0] = res.data;
					} else {}
					uni.hideLoading();
				});
			},



			doGetDocCodeAreaData(firstData) {
				uni.showLoading();
				var _self = this;
				getDocCodeAreaData({
					AreaCode: "",
					AreaName: "",
					FareaCode: firstData.FareaCode
				}).then((res) => {
					if (res.code == '000000') {
						res.data.forEach(element => {
							element.showText = element.AreaCode + "-" + element.AreaName
						});
						_self.multiArray[1] = res.data;
						_self.$forceUpdate()
					} else {}
					uni.hideLoading();
				});
			}


		}
	}
</script>

<style lang='scss'>
	.fun-section {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.fun-item {
			width: 100%;
			border: 1upx solid #3F536E;
			border-radius: 15upx;
			padding: 10upx;
			margin: 30upx;

			display: flex;
			flex-direction: column;
			align-items: center;

			.fun-img {
				width: 90upx;
				height: 90upx;
			}

			.fun-title {
				font-size: 30upx;
				color: #6E6E6E;
			}
		}
	}

	.user-section {
		position: relative;
		/* #ifdef APP-PLUS */
		height: 35vh;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 30vh;
		/* #endif */
		width: 100%;
		
		
		
		
		.user-section-bg {
			width: 100vw;
			height: 100%;
		}
	}

	.user-info-box {
		position: absolute;
		/* height: 240upx; */
		width: auto;
		left: 40upx;
		right: 40upx;
		bottom: -30upx;
		display: flex;
		align-items: center;
		padding: 64upx 40upx 64upx 40upx;
		justify-content: space-between;

		border: 2upx dotted #ffffff88;
		border-radius: 10px;
		/* background-color: #F0F0F0; */
		background-image:url('/static/myinfo-bg-0.png') ;
		background-repeat:no-repeat;
		background-position:center;
		
		box-shadow: 0px 4px 8px 0px rgba(0, 22, 65, 0.15);

		.portrait {
			width: 120upx;
			height: 120upx;
			border: 5upx solid #ffffff88;
			border-radius: 50%;
		}

		.username {
			font-size: 48upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 66upx;
			margin-bottom: 16upx;
		}

		.other-info {
			font-size: 22upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 32upx;

		}

		.arrow-right {
			width: 32upx;
			/* height: 32upx; */
			right: 48upx;
			position: absolute;
		}
	}

	.list {
		/* 		position: absolute;
		top: 35vh; */
		margin-top: 40upx;
		width: 100%;
		/* background: #fff; */
		z-index: 0;

		/* border: 1upx solid #eee; */
		.sub-list {
			margin: 0 32upx;
			/* width: 100%; */
			border-bottom: 1px solid rgba(0, 0, 0, 0.07);
			
/* 			box-shadow: 0px 1px 0px 0px #FFFFFF;
 */		}
	}

	.menu-item {
		width: 100%;
		padding: 32upx 0upx;
		align-items: center;
		display: flex;
		position: relative;
	}

	.menu-item-hover {
		background-color: #eee;
	}

	.menu-item-icon {
		width: 58upx;
		height: 52upx;
	}

	.menu-text {
		width: 100%;
		margin-left: 18upx;
		font-size: 32upx;

		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.45);

	}

	.menu-arrow-right {
		width: 36upx;
		height: 36upx;
		/* right: -20upx; */

	}


	.list-cell {
		width: 650upx;
		padding-left: 50upx;
		padding-right: 50upx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.list-cell-hover {
		background-color: #eee;
	}

	.divider {
		width: 100%;
		height: 1px;
		margin: 10upx;
		background: #008000;
	}
</style>
